<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <style>
        .item {
            overflow: hidden;
            padding: 10px;
            width: 400px;
            border: 1px solid red;
        }

        .item img {
            width: 100px;
            float: left;

        }

        .film {
            border: 1px solid black;
            height: 1500px;
        }

        .filminfo {
            width: 300px;
            min-height: 200px;
            background: yellow;
            position: fixed;
            right: 50px;
            top: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click="handleAjax">ajax</button>

        <film-item v-for="item in list" :key="item.filmId" :mydata="item" @myevent="handleEvent"></film-item>

        {{filmData}}
        <film-detail :film-desc="filmData"></film-detail>
    </div>
</body>
<script>
    Vue.component('filmItem', {
        props: ["mydata"],
        template: `
            <div class='item'>
                <img :src='mydata.poster'/>
                {{mydata.name}}
                <button @click='handleClick'>详情</button>
            </div>    
        `,
        methods: {
            handleClick() {
                console.log(this.mydata.synopsis);
                this.$emit('myevent', this.mydata.synopsis);
            }
        }
    });

    Vue.component('filmDetail', {
        props: ['filmDesc'],
        template: `
            <div class='filminfo'>详情--{{filmDesc}}</div>
        `
    });

    let vm = new Vue({
        el: '#app',
        data: {
            list: [],
            filmData: ''
        },
        methods: {
            handleAjax() {
                fetch('./json/test.json')
                    .then(res => res.json())
                    .then(res => {
                        this.list = res.data.films;
                    });
            },
            handleEvent(param) {
                console.log('父组件定义的函数--', param);
                this.filmData = param;
            }
        }
    });
    /*
      1. ajax 请求数据
      2. 自定义组件
      3. 父传子
      4. v-for
      5. 子传父
    */
</script>

</html>